<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem"></tablePaging>
    <el-dialog v-model="data.visible" :title="requestAddEdit.title" @close="requestAddEditInit">
      <el-form :rules="rules" ref="ruleFormRef" :model="requestAddEdit" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="data.title" prop="name">
              <el-input maxlength="30" v-model="requestAddEdit.name" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-left: 20%">
            <el-form-item label="排序" prop="orderNum">
              <el-input maxlength="30" type="number" v-model="requestAddEdit.orderNum" placeholder="请输入排序号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="data.visible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm()"> 确 定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import tablePaging from '@/views/common/component/table-paging'
import { onMounted, reactive, ref, } from 'vue'
import { Plus, Search } from "@element-plus/icons-vue";
import {
  listDictItemByCode,
  addDictItem,
  editDictItem,
  delDictItem
} from '@/api/config/dic'
import { tableItem } from './const'
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from 'vue-router/dist/vue-router'
const router = useRouter()
const route = useRoute()
const routeQuery = reactive(route.query)
const { proxy } = getCurrentInstance();
onMounted(() => {
  data.title = routeQuery.typeName
  data.typeCode = routeQuery.typeCode
  data.id = routeQuery.id
})
const data = reactive({
  id: '',
  visible: false,
  title: '',
  typeCode: ''
})
const operationItem = reactive({
  defaultSearch: true,//默认搜索按钮
  defaultRefresh: false,//默认重置按钮
  SearchText: "查询", //搜索文字 默认搜索
  RefreshText: "重置", //刷新文字 默认重置
  customTableHeader: true,//自定义表单头部插槽
  SearchItem: [
    {
      code: "name",
      name: "内容",
      type: 'input',
    },
  ],
  menuArray: [
    {
      show: true,
      type: 'primary',
      text: '新增',
      hasPermi:'',
      icon: Plus,
      customParameters: 'add',//自定义函数参数
      handle: () => {
        console.log('handle')
      }
    },
  ]
})
const ruleFormRef = ref('')
const requestAddEdit = reactive({
  name: '',
  parentId: '',
  orderNum: null,
  title: '新增',
  type: 'add'// subAdd新增下级 add新增课程 edit 修改
})
const rules = reactive({
  name: [{ required: true, message: '请输入内容', trigger: 'blur' },],
  orderNum: [{ required: true, message: '请输入排序号', trigger: 'blur' },],
})
const requestAddEditInit = () => {
  requestAddEdit.name = ''
  requestAddEdit.parentId = ''
  requestAddEdit.orderNum = null
  requestAddEdit.type = "add"
  if (ruleFormRef.value) { ruleFormRef.value.clearValidate() }
}
const courseAddEdit = (row, type) => {
  requestAddEdit.type = type || 'add'
  switch (requestAddEdit.type) {
    case 'add': requestAddEdit.title = '新增' + data.title;requestAddEdit.parentId = routeQuery.id
      break;
    case 'subAdd': requestAddEdit.title = '新增下级'; requestAddEdit.name = '';requestAddEdit.orderNum = null;requestAddEdit.parentId = row.id
      break;
    case 'edit': requestAddEdit.title = '修改' + data.title;requestAddEdit.name = row.name;requestAddEdit.orderNum = row.orderNum;requestAddEdit.id = row.id
      break;
    default: ''
  }
  data.visible = true
}
const apiMap = {
  list: listDictItemByCode,
  add: addDictItem,
  edit: editDictItem,
  del: delDictItem,
}

const confirm = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate((valid, fields) => {
    if (!valid) { return }
    if (requestAddEdit.type == 'edit') {
      const { name, id, orderNum } = requestAddEdit
      let dataRequest = { name, id, orderNum }
      dataRequest.typeCode = routeQuery.typeCode
      apiMap.edit(dataRequest).then(res => {
        ElMessage.success('操作成功'); data.visible = false; tableItem.pageInfo.paging()
      })
    } else {
      const { name, parentId, orderNum } = requestAddEdit
      let dataRequest = { name, parentId, orderNum }
      dataRequest.typeCode = routeQuery.typeCode
      console.log(dataRequest, 'dataRequest')
      apiMap.add(dataRequest).then(res => {
        ElMessage.success('操作成功'); data.visible = false; tableItem.pageInfo.paging()
      })
    }
  })
}
operationItem.menuArray[0].handle = () => courseAddEdit('','add')
tableItem.btnArray[0].handle = (row) => courseAddEdit(row,'subAdd')
tableItem.btnArray[1].handle = (row) => courseAddEdit(row,'edit')
tableItem.btnArray[2].handle = (row) => {
  proxy.$modal.confirm("确定删除" + row.name || '').then(() => {
    apiMap.del(row.id).then(res => {
      ElMessage.success('操作成功'); tableItem.pageInfo.paging()
    })
  })
}

</script>

<style scoped></style>
